<template>
  <Child @adds="adds" />
  <div class="bd">
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import Child from './child.vue'
import { ref } from 'vue'

const list = ref(['html', 'css', 'js'])
// e是子组件传递过来的参数，@adds后面的adds是触发子组件自定义的adds事件时所要执行的函数
const adds = (e) => {
  list.value.push(e)
}
</script>

<style lang="css" scoped>

</style>